<template>
  <div class="json-index">
    <div class="editor-container">
      <div class="editor-header">Input JSON</div>
      <CoddingEditor :value="inputJson" @change="handleChange" />
      <div class="button-group">
        <button @click="formatJson">Format</button>
        <button @click="compressJson">Compress</button>
        <button @click="sortJson">Sort</button>
        <button @click="escapeJson">Escape</button>
        <button @click="unescapeJson">Unescape</button>
      </div>
    </div>
    <div class="editor-container">
      <div class="editor-header">Output JSON</div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, h } from "vue";
  import CoddingEditor from "@/components/editor/CoddingEditor.vue";

  const inputJson = ref<string>("");
  const outputJson = ref<string>("");
  const editorOptions = ref({
    automaticLayout: true,
    scrollBeyondLastLine: false,
  });

  const handleChange = (value: string) => {
    console.log(value);
  };

  const formatJson = () => {
    try {
      const parsed = JSON.parse(inputJson.value);
      outputJson.value = JSON.stringify(parsed, null, 2);
    } catch (error) {
      outputJson.value = "Invalid JSON";
    }
  };

  const compressJson = () => {
    try {
      const parsed = JSON.parse(inputJson.value);
      outputJson.value = JSON.stringify(parsed);
    } catch (error) {
      outputJson.value = "Invalid JSON";
    }
  };

  const sortJson = () => {
    try {
      const parsed = JSON.parse(inputJson.value);
      const sorted = sortObject(parsed);
      outputJson.value = JSON.stringify(sorted, null, 2);
    } catch (error) {
      outputJson.value = "Invalid JSON";
    }
  };

  const escapeJson = () => {
    outputJson.value = JSON.stringify(inputJson.value);
  };

  const unescapeJson = () => {
    try {
      outputJson.value = JSON.parse(inputJson.value);
    } catch (error) {
      outputJson.value = "Invalid JSON";
    }
  };

  const sortObject = (obj: any): any => {
    if (typeof obj !== "object" || obj === null) {
      return obj;
    }
    if (Array.isArray(obj)) {
      return obj.map((item) => sortObject(item));
    }
    const sortedKeys = Object.keys(obj).sort();
    const sortedObj: { [key: string]: any } = {};
    for (const key of sortedKeys) {
      sortedObj[key] = sortObject(obj[key]);
    }
    return sortedObj;
  };
</script>

<style scoped>
  /* 样式保持不变 */
  .json-index {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 20px;
  }

  .editor-container {
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
  }

  .editor-header {
    background-color: #f8f9fa;
    padding: 10px;
    font-weight: bold;
  }

  .editor {
    height: 300px;
  }

  .button-group {
    display: flex;
    gap: 10px;
    padding: 10px;
    justify-content: center;
  }

  button {
    padding: 5px 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  button:hover {
    background-color: #0056b3;
  }
</style>
